@extends('layout.app')

@section('title', 'Form Tab')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body">
        @verbatim
            <div class="border-bottom border-info form-group" id="element-dynamic-tab1">
                <ul class="nav nav-tabs">
                    <li class="nav-link"
                        v-for="tab in tabs"
                        :key="tab"
                        :class="{active: current === tab}"
                        @click="current=tab">
                        <a href="javascript:void(0);">{{tab}}</a>
                    </li>
                </ul>
                <div class="p-2">
                    <component name="component" class="c1" v-bind:is="currentTabComponent" class="tab"></component>
                </div>
            </div>
            <div class="border-bottom border-info form-group" id="element-dynamic-tab2">
                <ul class="nav nav-tabs">
                    <li class="nav-link"
                        v-for="tab in tabList"
                        :key="tab.name"
                        :class="{active: current.name === tab.name}"
                        @click="current=tab">
                        <a href="javascript:void(0);">{{tab.name}}</a>
                    </li>
                </ul>
                <div class="p-2">
                    <component v-bind:is="current.component" class="tab"></component>
                </div>
            </div>
            <div class="border-bottom border-info form-group" id="element-dynamic-tab3">
                <table class="table">
                    <tr is="person-item"
                        class="tr2"
                        data-date-picker2='activated'
                        v-for="person in persons"
                        :person-info="person"
                        :me="'me'"
                        :is-bool="false"
                        :key="person.id"></tr>
                </table>
            </div>
            <div class="border-bottom border-info form-group" id="element-dynamic-tab4">
                <ul class="nav nav-tabs nav-pills">
                    <nav-tab
                        v-for="nav in navs"
                        :key="nav"
                        :nav="nav">
                    </nav-tab>
                </ul>
                <div class="p-2">
                    <component v-bind:is="currentNavComponent" :articles="articles" class="tab"></component>
                </div>
            </div>
        @endverbatim
        </div>
    </div>
</div>
@verbatim
<script>
Vue.component('tab-home', {
    inheritAttrs: true,
    template: "<div class='c2' name='component-home'>Tab Home</div>"
});
Vue.component('tab-service', {
    inheritAttrs: false,
    template: "<div class='c2' name='component-servoce'>Tab Service</div>"
});
Vue.component('tab-about', {
    inheritAttrs: false,
    template: "<div class='c2' name='component-about'>Tab About</div>"
});
new Vue({
    el: "#element-dynamic-tab1",
    data: {
        current: "Home",
        tabs: ["Home", "Service", "About"]
    },
    computed: {
        currentTabComponent: function() {
            console.log("tab-" + this.current.toLowerCase());
            return "tab-" + this.current.toLowerCase();
        }
    }
});

var tabList = [
    {
        name: 'Home',
        component: {
            template: '<div>Home component</div>'
        }
    },
    {
        name: 'Service',
        component: {
            template: '<div>Service component</div>'
        }
    },
    {
        name: 'About',
        component: {
            template: '<div>About component</div>',
        }
    }
];

new Vue({
    el: '#element-dynamic-tab2',
    data: {
        tabList: tabList,
        current: tabList[0]
    }
});

Vue.component("person-item", {
    props: {
        me: String,
        personInfo: Object,
        isBool: Boolean
    },
    computed: {
        upperName: function() {
            return this.personInfo.name.toUpperCase();
        }
    },
    template: "<tr class='tr1' data-date-picker1='activated'>" +
          "<td>{{personInfo.id}}</td>" +
          "<td>{{upperName}}</td>" +
          "<td>{{personInfo.content}}</td>" +
          "<td>{{isBool}} {{me}}</td>" +
        "</tr>"
});

new Vue({
    el: "#element-dynamic-tab3",
    data: {
        persons: [
            {id: 1, name:"Mark", content: "@mdo"},
            {id: 2, name:"Jacob", content: "@fat"},
            {id: 3, name:"Larry", content: "@twitter"}
        ]
    }
});
//nav 4
Vue.component('nav-tab', {
    props: ['nav'],
    template:`<li
    class="nav-item"
    @click="$parent.currentNav=nav">
    <a class="nav-link"
    href="javascript:void(0);" :class="{active: $parent.currentNav === nav}">{{nav}}</a></li>`
});

Vue.component('nav-about', {
    template: `<div>about</div>`
});

Vue.component('nav-article', {
    props: {
        articles: [Array, Object]
    },
    template: `<div v-if="articles.length" class="d-flex">
<article-titles :articles='articles' :currentArticle="$root.currentArticle"></article-titles>
<article-content :articles='articles' :currentArticle="$root.currentArticle"></article-content>
</div>`
});

Vue.component('article-titles', {
    props: {
        articles: Array
    },

    template: `<ul class="nav flex-column nav-pills col-3">
    <li class="nav-link"
    :class="{active: $root.currentArticle == article}"
    v-for="(article, index) in articles"
    @click="$root.currentArticle=article"
    :key='article.id'>{{article.title}}</li>
    </ul>`
});

Vue.component('article-content', {
    template: `<div v-if="$root.currentArticle" class="content">{{$root.currentArticle.content}}</div>
    <div v-else>Click article title to view content</div>`
});

var vm4 = new Vue({
    el: "#element-dynamic-tab4",
    data: {
        currentNav: "Article",
        navs: ["Article", "About"],
        currentArticle: null,
        navPrefix: "nav",
        articles: [
            {title: "first name", content: "first content"},
            {title: "second name", content: "second content"},
            {title: "third name", content: "third content"}
        ],
    },
    created: function() {
        var vm = this;
        $.ajax({
            url: "/ajax/article/list",
            type: "POST",
            data: {
                // count: 5,
                ids: []
            },
            success: function(data) {
                vm.articles = data;
            },
            headers: {
                'X-CSRF-TOKEN': $("#s_token").attr('content')
            }
        });
    },
    computed: {
        selectArticle: function() {
            return this.currentArticle;
        },
        currentNavComponent: function() {
            return this.navPrefix + "-" + this.currentNav.toLowerCase();
        }
    }
});
</script>
@endverbatim
@endsection


